<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{
                width: 300px;
                height: 500px;
                display: block;
                margin: 0 auto;
                transition: all 1s;
            }
            img:hover{
                -webkit-filter: none;
            }
            .img1{
                -webkit-filter: blur(50px);
            }
            .img2{
                -webkit-filter: brightness(2);
            }
            .img3{
                -webkit-filter: contrast(2);
            }
        </style>
        <style type="text/css">
            @media only screen and (max-width:640px) {
                #mainav {
                    height: 48px;
                }
            }
        </style>
    </head>
    <body>
            <img src="img.png" class="img1">
            <img src="img.png" class="img2" >
            <img src="img.png" class="img3" >
            <img src="img.png" class="img4" >
            <img src="img.png" class="img5" >
            <img src="img.png" class="img6" >
            <img src="img.png" class="img7" >
            <img src="img.png" class="img8" >
    </body>
</html>